<!-- 新闻详情 -->
<template>
  <div class="all">
    <!-- 折叠面板组件 -->

    <Card>
      <div style="min-height: 730px">
        <Row>
          <Col span="2">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>新建规章制度</Col>
            </Row>
          </Col>
        </Row>
        <!-- 新闻表单 -->
        <Form ref="ndForm" :model="ndForm" :rules="ndRuleForm" :label-width="110">
          <Row>
            <Col span="7">
              <FormItem label="标题" prop="nd_title">
                <Input v-model="ndForm.nd_title" placeholder="请输入标题名称"></Input>
              </FormItem>
            </Col>
          </Row>
          <Row></Row>
          <Row>
            <Col span="7">
              <FormItem label="文号" prop="nd_title">
                <Input v-model="ndForm.nd_title" placeholder="请输入文号"></Input>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="7">
              <FormItem label="发布时间" prop="nd_release">
                <Row type="flex" justify="space-between">
                  <Col span="11">
                    <FormItem prop="nd_release_date">
                      <DatePicker type="date" placeholder="选择发布日期"></DatePicker>
                    </FormItem>
                  </Col>
                  <Col span="1">-</Col>
                  <Col span="11">
                    <FormItem prop="nd_release_time">
                      <TimePicker type="time" placeholder="选择发布时间"></TimePicker>
                    </FormItem>
                  </Col>
                </Row>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="7">
            <!-- :headers="headers"  :action="apiData+'/emergency-filestore/file/store/single'"-->
              <FormItem label="附件上传：">    
                <Upload
                  :disabled="fileUpDisabled"
                  :multiple="false"
                  type="drag"
                  
                  
                  :on-success="fileUpSuccess"
                  :on-remove="fileUpRemove"
                >
                  <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" ></Icon>
                    <p>请点击或拖拽文件到此区域</p>
                  </div>
                </Upload>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <COl span="7">
            <FormItem label="法律法规内容" prop="fileContent">
              <br />
              <br />
              <div v-html="ndForm.fileContent"></div>
              
              <!-- :key="menuKey" -->
              <Editor v-model="ndForm.fileContent" v-if="EditorDisplay" @on-change="handleChange"  style="height:100%;min-height:350px;"></Editor>
              <Input v-model="ndForm.fileContent" style="display:none" :rows="16" type="textarea" placeholder="请输入法律法规内容..."/>
              
              <Divider orientation="right">
                <div id="rep-btn" style="text-align: right;">
                    <Button type="primary" size="small" @click="saveEdit" v-if="EditorDisplay">保存编辑</Button>
                    <Button type="primary" size="small" style="margin-left:10px;" @click="cancelEdit" v-if="EditorDisplay">取消编辑</Button>
                    <Button type="primary" size="small" @click="toEvent" v-if="!EditorDisplay">编辑内容</Button>
                </div>
              </Divider>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="7" type="flex" align="middle" justify="center">
              <FormItem>
                <Button type="primary" @click="handleSubmit('ndForm')">提交</Button>
                <!-- <Button type="success" @click="handleReset('ndForm')" style="margin-left: 8px">审核通过</Button> -->
                <Button type="error" @click="handleReset('ndForm')" style="margin-left: 8px">重置</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </Card>
  </div>
</template>
<style scoped>
.send-news {
  margin-bottom: 10px;
}

.nl-square {
  width: 3px;
  height: 13px;
  background: #3431ec;
}
/* 旋转 */
.aa {
  transition: all 0.2s;
  transform-origin: 50% 50%;
}
.go {
  transform: rotate(-180deg);
  transition: all 0.2s;
  transform-origin: 50% 50%;
}
/* .ivu-form .ivu-form-item-label{
    color: rgb(64, 149, 255) !important;
} */
</style>
<script>
export default {
  data() {
    return {
      //表单数据
      ndForm: {
        nd_title: "",
        nd_name: "",
        nd_issued: "",
        nd_news_attributes: [],
        nd_media: "",
        nd_estimated_time: "",
        nd_release_time: "",
        nd_release_date: "",
        nd_same_report: "",
        nd_reprinted: "",
        nd_quality_analysis: "",
        nd_abstract: "",
        nd_word_count: "",
        nd_score: "",
        fileContent:""
      },
      ndRuleForm: {
        nd_title: [
          { required: true, message: "请输入新闻标题", trigger: "blur" }
        ],
        nd_name: [
          { required: true, message: "请输入作者姓名", trigger: "blur" }
        ],
        nd_issued: [{ required: true }],
        nd_news_attributes: [{ required: true }],
        nd_media: [{ required: true }],
        nd_estimated_time: [{ required: true }],
        nd_release: [{ required: true }],
        nd_same_report: [{ required: true }],
        nd_reprinted: [{ required: true }],
        nd_quality_analysis: [{ required: true }],
        nd_abstract: [{ required: true }],
        nd_word_count: [{ required: true }],
        nd_score: [{ required: true }]
      },
      rotate: false, //控制折叠面板图标旋转,
      efaultList: [
        {
          name: "a42bdcc1178e62b4694c830f028db5c0",
          url:
            "https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar"
        },
        {
          name: "bc7521e033abdd1e92222d733590f104",
          url:
            "https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
        }
      ],
      imgName: "",
      visible: false,
      uploadList: [],
      EditorDisplay:false,
      templateContentCopy:'',
      fileUpDisabled:false,//是否禁用文件上传
       
    };
  },
  created() {
    console.log(this.$route.params.id);
    this.ndForm.nd_title = window.news[this.$route.params.id].headlines; //
  },
 
  methods: {
    test(name) {
      this.$router.push({ name: name });
    },
    //改变折叠面板的图标https://www.cnblogs.com/IwishIcould/p/11823397.html
    changeIcon() {
      this.rotate = !this.rotate;
    },
    //表单按钮方法
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
     handleChange (html, text) {//修改简报内容
      // console.log(html,'777777777777')
      this.ndForm.fileContent=JSON.parse(JSON.stringify(html))
      // this.text=text
      this.$forceUpdate()
    },
    toEvent(){      //编辑内容
        this.EditorDisplay=true
        this.templateContentCopy=JSON.parse(JSON.stringify(this.formData.fileContent))
    },
    saveEdit(){      //保存编辑
        this.EditorDisplay=false
    },
    cancelEdit(){      //取消编辑
        this.EditorDisplay=false
        this.ndForm.fileContent=JSON.parse(JSON.stringify(this.templateContentCopy))  
    },
     fileUpSuccess(response, file, fileList){//此处设置为单文件上传API
      //此处设置为单文件上传API
    //注意，因为是单文件，所以这个data是对象不是对象数组
      //当完成一个文件的上传后，禁用上传，只有当删除文件后，允许继续上传
      this.upLoadFileList={}
     this.upLoadFileList=file
      if(this.upLoadFileList.response.code==0){//判断是否成功
      let typeVo={extensions: {typeName:"审批表单附件"},source: "预案审批",type: "",uuid:file.response.data.uuid}//添加写死信息
      getNewFileType(typeVo).then(res=>{//因为需要在资料管理中添加信息，所以在这里加一步判断添加操作
      if(res.status==200){//因为成功后返回200，所以用状态码200判断//如果添加信息成功，那么禁止上传
        this.fileUpDisabled=true//覆盖画布
        this.fileUpStyle={color:'#dcdee2'}//修改上传图标效果
      }else{                                                   //如果添加信息失败，那么允许继续上传，然后删除上一上传uuid
        this.fileUpDisabled=false//覆盖画布                     
        this.fileUpStyle={color:'#3399ff'}//修改上传图标效果
        this.$Message.error("添加失败，请从新上传！");
      }
      })
      }else{
        this.fileUpDisabled=false//覆盖画布
        this.fileUpStyle={color:'#3399ff'}//修改上传图标效果
      }
    },
    //文件上传组件删除(单文件)
    fileUpRemove(file, fileList){
    //先直接删除掉直接存入数据库的文件信息 注意此时是单文件，所以这个data是对象不是对象数组
    getStoreDelete(file.response.data.uuid).then(res=>{ //必须删除，不然会在资料列表中刷新出来
        this.fileUpDisabled=false//覆盖画布
        this.fileUpStyle={color:'#3399ff'}//修改上传图标效果
        this.upLoadFileList.response.code=1//删除成功后将文件校验的code值从0改变
    })
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      file.url =
        "https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar";
      file.name = "7eb99afb9d5f317c912f08b5212fd69a";
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "The file format is incorrect",
        desc:
          "File format of " +
          file.name +
          " is incorrect, please select jpg or png."
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "Exceeding file size limit",
        desc: "File  " + file.name + " is too large, no more than 2M."
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "Up to five pictures can be uploaded."
        });
      }
      return check;
    }
  },
  computed: {}
};
</script>

